<template>
  <Select placeholder="请输入客户名称" v-model="customerVals" filterable remote multiple :remote-method="searchCustomers" :loading="searchLoading">
    <Option v-for="(option, index) in customerOptions" :value="option.value" :key="`customer-complete-option-${option.value}`" :label="option.label">
      {{showInfo?`${option.label} ${option.contacts} ${option.phone}`:option.label}}
    </Option>
  </Select>
</template>

<script>
  import {post}  from '@/util/request'

  export default {
    props: ["customerIds",'showInfo'],
    data() {
      return {
        customerVals: [],
        customerOptions: [],
        searchLoading: false
      }
    },
    watch: {
      customerVals(v) {
        let ids = v.join(',');
        this.$emit("update:customerIds", ids);
      }
    },
    methods:{
      searchCustomers(query){
        if(query !== '') {
          this.searchLoading = true;
          let data = {
            cusName: query
          };
          post('/common/findCustomerBycusName', data).then(json => {
            this.searchLoading = false;
            if (json.data.sta === 200) {
              this.customerOptions = json.data.data.map(item => {
                return {
                  value:item.id,
                  label:item.name,
                  contacts:item.contacts,
                  phone:item.phone
                };
              });
            }
          });
        } else {
          this.customerOptions = [];
        }
      }
    }
  }
</script>
